<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="top">
          <el-button style="margin-right: 50%;" size="samll" type="primary" @click="addFn">添加分类</el-button>
          <div class="search">
            <el-input v-model="searchValue" placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="searchFn" />
            </el-input>
          </div>
        </div>
        <div class="bottom">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="image "
              label="图片"
              width="180"
            >
              <!-- 图片显示 -->
              <template v-slot="{row}">
                <img :src="row.image" style="width:100px">
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
            />
            <el-table-column
              prop="desc"
              label="介绍"
            />
            <el-table-column
              label="操作"
            >
              <template v-slot="{row}">
                <el-button type="primary" size="small" @click="editorFn(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <!--
            page-size：每页展示的数量
            current-page：当前页码
            layout：分页按钮布局
           -->
            <el-pagination
              :page-size="limit"
              layout="prev, pager, next"
              :total="total"
              @current-change="curChange"
            />
          </el-row>
        </div>
      </el-card>
      <Add ref="addRole" :dialog-visible.sync="dialogVisible" @addEvent="getclassifyAdminList" />
    </div>
  </div>
</template>

<script>
import Add from './components/classify-dialog.vue'
import { delclassifycation, getclassifyamount, getclassifycation } from '@/api/classification'
export default {
  components: {
    Add
  },
  data() {
    return {
      searchValue: '', // 搜索
      dialogVisible: false,
      total: 0,
      tableData: [],
      limit: 3, // 每页的获取条数
      start: 0, // 开始获取的位置
      title_contains: ''// 模糊搜索 title
    }
  },
  created() {
    this.getclassifyAdminList()
  },
  methods: {
    // 删除功能
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await delclassifycation(id)
        // 刷新页面
        this.getclassifyAdminList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 封装页面渲染函数
    async getclassifyAdminList() {
      // 获取列表的数据
      const res = await getclassifycation({
        _limit: this.limit,
        _start: this.start
      })
      // 获取分类数量
      const list = await getclassifyamount()
      console.log(86, list)
      this.tableData = res.data
      this.total = list.data
    },
    // 控制分页器切换
    curChange(pager) {
      // 如果点击的那一页等于1就是第一页
      // 如果不等于1，那就是点击的那一页减1再乘以页面条数得出的结果就是开始渲染的位置
      this.start = pager === 1 ? 0 : (pager - 1) * this.limit
      this.getclassifyAdminList()
    },
    // 打开新增分类弹窗
    addFn() {
      this.dialogVisible = true
    },
    // 打开编辑弹窗
    editorFn(id) {
      this.dialogVisible = true
      this.$refs.addRole.getEditor(id)
    },
    // 搜索函数
    async searchFn() {
      const res = await getclassifycation({ title_contains: this.searchValue })// 拿到搜索需要的标题
      console.log(139, res)
      // 优化如果输入框为空就会返回所有的数据渲染在一个页面上
      // 判断输入框是否为空
      if (this.searchValue === '') {
        // 为空就调用封装的渲染函数
        this.getclassifyAdminList()
      } else {
        // 有输入内容就重新赋值给表单渲染
        this.tableData = res.data
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.top{
  position: relative;
  width: 100%;
  height: 70px;
  display: inline-block;
  border-bottom: 1px solid #ccc;
  .search{
    position: absolute;
    right: 0px;
    width: 475px;
    display: inline-block;
    .el-input__inner{
      border-radius: none;
    }
  }
}
.bottom{
  margin-top: 20px;
}
</style>
